<template>

  <div class="app-container">
    <!--    {{ searchObj }}-->
    <div>
      <el-form :inline="true" :model="datas" class="demo-form-inline">
        <el-form-item label="商品名称">
          <el-input v-model="datas.name" placeholder="矿泉水"></el-input>
        </el-form-item>
        <el-form-item label="积分数量">
          <el-input v-model="datas.money" placeholder="50"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- banner列表      -->
    <div>
      <!--    id,cName,Money,cType,Number,cDescribe,image-->
      <el-table :data="searchObj" style="width: 100%"><!--v-loading="loading"-->
        <el-table-column prop="id" label="id" width="180"></el-table-column>
        <el-table-column prop="image" label="描述图片">
          <template slot-scope="scope">
            <img width="40" height="40" class="head_pic" :src="'data:image/jpg;base64,'+scope.row.image"/>
            <!-- window.URL.createObjectURL()new Blob([])-->
          </template>
        </el-table-column>
        <el-table-column prop="cname" label="商品名称" width="180"></el-table-column>
        <el-table-column prop="money" label="商品积分价格" width="180"></el-table-column>
        <el-table-column prop="ctype" label="商品类型" :formatter="stateFormat"></el-table-column>
        <el-table-column prop="number" label="商品数量"></el-table-column>
        <el-table-column prop="cdescribe" label="描述"></el-table-column>

        <el-table-column fixed="right" label="操作" width="300">
          <template slot-scope="scope">
            <el-button @click="reportehg(scope.row)" type="danger" icon="el-icon-goods" size="small">
              兑换
            </el-button>
            <el-button @click="report(scope.row)" type="primary" icon="el-icon-edit" size="small">
              编辑
            </el-button>
            <el-button type="danger" icon="el-icon-delete" size="small" @click="handleClick(scope.$index, scope.row)">
              删除
            </el-button>

          </template>

        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
          :current-page="current"
          :page-size="limit"
          :total="total"
          style="padding: 30px 0; text-align: center;"
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="getList">
      </el-pagination>
    </div>
    <conUpdate :dialogconUpdate.sync="dialog_show" :accuseitem="accuseitem"/>
    <exchange :dialogconUpdate.sync="dialog_showehg" :accuseitem="accuseitem"/>
  </div>
</template>
<script>
//引入api接口
import hospitalSetApi from "@/api/integral";
import conUpdate from "@/views/integral/CommodityUpdate";
import exchange from "@/views/integral/exchange"

export default {
  components: {conUpdate, exchange},
  data() {
    return {
      srcimage: Object,
      accuseitem: {},
      scoperow: "",
      dialog_show: false,
      dialog_showehg: false,
      current: 1,
      limit: 5,
      searchObj: [],
      total: 0,
      pages: 0,
      pageSizes: 0,
      datas: {
        name: "",
        money: 0,
        pageNo: 1,
        pageSize: 5
      },
      scope: null,
      delVisible: false,//删除提示弹框的状态
      msg: null//记录每一条的信息，便于取id
    }
  },
  // 页面渲染成功后获取数据
  created() {
    this.getList();
  },
  methods: {//定义方法对api接口的方法调用
    stateFormat(row, column) {
      if (row.ctype == 0) {
        return '实体'
      } else {
        return '虚拟'
      }
    },
    getList(page = 1) {
      this.datas.pageNo = page
      hospitalSetApi.showCommodity(this.datas)
          .then(res => {
            this.total = res.data.total
            this.searchObj = res.data.records
            // this.pages = res.data.pages
            console.log(res)
          })//请求成功
          .catch(error => {
            console.log(error)
          })//请求失败
    },
    arrayBufferToBase64(buffer) {
      var binary = ''
      var bytes = new Uint8Array(buffer)
      var len = bytes.byteLength
      for (var i = 0; i < len; i++) {
        binary += String.fromCharCode(bytes[i])
      }
      return window.btoa(binary)
    },
    onSubmit() {
      this.getList();
    },
    report(item) {
      this.accuseitem = item;
      this.dialog_show = true;
    },
    reportehg(item) {
      this.accuseitem = item;
      this.dialog_showehg = true;
    },
    //单行删除
    handleClick(index, row) {
      this.msg = row
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        hospitalSetApi.findDelCommodity(this.msg.id)
            .then(res => {
              console.log(this.msg.id)
              if (res.data == true) {
                this.$message({
                  type: 'success',
                  message: '删除成功!',
                });
              } else {
                this.$message({
                  type: 'defeated',
                  message: '删除失败!',
                });
              }
            }).catch(error => {
          console.log("请求失败" + error)
        })//请求失败

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  }
};
</script>
